import React from 'react';

interface AboutProps {}

const About: React.FC<AboutProps> = () => {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>关于我们</h1>
      <p>这个项目展示了如何在React应用中配置和使用React Router进行页面导航。</p>
      
      <div style={{ marginTop: '30px' }}>
        <h2>技术栈</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px', marginTop: '15px' }}>
          <div style={{ padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
            <h3>React</h3>
            <p>用于构建用户界面的JavaScript库</p>
          </div>
          <div style={{ padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
            <h3>TypeScript</h3>
            <p>带类型的JavaScript超集</p>
          </div>
          <div style={{ padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
            <h3>React Router</h3>
            <p>React的声明式路由库</p>
          </div>
          <div style={{ padding: '15px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
            <h3>Vite</h3>
            <p>快速的构建工具和开发服务器</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;
